<template>
    <div>
        <div class="content">
            <vxe-form :data="formData" :items="formItems" :rules="rules" titleColon> </vxe-form>
        </div>
        <el-card style="overflow: auto">
            <el-tabs v-model="activeName">
                <el-tab-pane v-for="(methodName, index) in tableMethod" :key="index" :name="methodName.field" :label="methodName.title">
                    <monaco-editor v-model="formData[methodName.field]" :height="paneHeight" :language="methodName.language" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { MonacoEditor } from "@/components/MonacoEditor";
    import { tableFormDataDefault } from "./propsDefault";
    const activeName = ref("footerMethod");
    const props = defineProps({
        formData: {
            type: Object,
            default: tableFormDataDefault,
        },
    });
    const paneHeight = ref(document.documentElement.scrollHeight - 579 + "px");
    const tableMethod = [
        { field: "footerMethod", title: "格式化显示内容", language: "json" },
        { field: "rowclassName", title: "给行附加className", language: "json" },
        { field: "cellClassName", title: "给单元格附加className", language: "json" },
        { field: "headerRowClassName", title: "给表头的行附加className", language: "json" },
        { field: "headerCellClassName", title: "给表头的单元格附加className", language: "json" },
        { field: "footerRowClassName", title: "给表尾的行附加className", language: "json" },
        { field: "footerCellClassName", title: "给表尾的单元格附加className", language: "json" },
        { field: "extraConfig", title: "额外配置", language: "json" },
        { field: "extParams", title: "额外参数", language: "json" },
    ];

    const advancedMethodName = {};
    // 表单校验
    const rules = ref({
        uniqueId: [{ required: true, message: "请输入表主键" }],
    });

    const formItems = reactive([
        { field: "uniqueId", title: "主键字段", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "rowId", title: "行ID", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "height", title: "高度", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入高度" } } },
        { field: "maxHeight", title: "最大高度", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入高度" } } },
        { field: "autoResize", title: "自动监听父元素的变化去重新计算表格", span: 4, itemRender: { name: "$checkbox" } },
        { field: "syncResize", title: "自动跟随某个属性的变化去重新计算表格", span: 4, itemRender: { name: "$checkbox" } },
        {
            field: "stripe",
            title: "是否带有斑马纹",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "border",
            title: "是否带有边框",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "round",
            title: "是否为圆角边框",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "size",
            title: "表格的尺寸",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "", label: "" },
                    { value: "medium", label: "medium" },
                    { value: "small", label: "small" },
                    { value: "mini", label: "mini" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        {
            field: "align",
            title: "列对齐方式",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "left", label: "左对齐" },
                    { value: "center", label: "居中对齐" },
                    { value: "right", label: "右对齐" },
                ],
                props: { placeholder: "请选择对齐方式" },
            },
        },
        {
            field: "headerAlign",
            title: "表头列的对齐方式",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "left", label: "左对齐" },
                    { value: "center", label: "居中对齐" },
                    { value: "right", label: "右对齐" },
                ],
                props: { placeholder: "请选择对齐方式" },
            },
        },
        {
            field: "footerAlign",
            title: "表尾列的对齐方式",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "left", label: "左对齐" },
                    { value: "center", label: "居中对齐" },
                    { value: "right", label: "右对齐" },
                ],
                props: { placeholder: "请选择对齐方式" },
            },
        },
        {
            field: "showHeader",
            title: "是否显示表头",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "showFooter",
            title: "是否显示表尾",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "showOverflow",
            title: "内容过长时显示",
            span: 6,
            itemRender: {
                name: "$select",
                options: [
                    { value: "ellipsis", label: "显示省略号" },
                    { value: "title", label: "原生 title" },
                    { value: "tooltip", label: "显示tooltip" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        {
            field: "showHeaderOverflow",
            title: "表头内容过长时显示",
            span: 6,
            itemRender: {
                name: "$select",
                options: [
                    { value: "ellipsis", label: "显示省略号" },
                    { value: "title", label: "原生 title" },
                    { value: "tooltip", label: "显示tooltip" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        {
            field: "showFooterOverflow",
            title: "表尾内容过长时显示",
            span: 6,
            itemRender: {
                name: "$select",
                options: [
                    { value: "ellipsis", label: "显示省略号" },
                    { value: "title", label: "原生 title" },
                    { value: "tooltip", label: "显示tooltip" },
                ],
                props: { placeholder: "请选择" },
            },
        },

        {
            field: "handConfig",
            title: "操作配置",
            span: 12,
            itemRender: {
                name: "$checkbox",
                options: [
                    { label: "保存", value: "save" },
                    { label: "添加", value: "add" },
                    { label: "修改", value: "modify" },
                    { label: "删除", value: "delete" },
                ],
            },
        },
        { field: "keepSource", title: "保持原始值的状态", span: 4, itemRender: { name: "$switch", props: { openLabel: "是", closeLabel: "否" } } },
        { field: "emptyText", title: "空数据时显示的内容", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入内容" } } },
        { field: "extParams", title: "自定义参数", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "remark", title: "备注", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        // { field: "footerMethod", title: "表尾的数据获取方法", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入表尾的数据获取方法" } } },
        // { field: "rowclassName", title: "行className", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入行className" } } },
        // { field: "cellClassName", title: "单元格className", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入单元格className" } } },
        // { field: "headerRowClassName", title: "表头className", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入表头className" } } },
        // { field: "headerCellClassName", title: "表头单元格className", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入表头单元格className" } } },
        // { field: "footerRowClassName", title: "表尾行className", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入表尾行className" } } },
        // { field: "footerCellClassName", title: "表尾单元格className", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入表尾单元格className" } } },
    ]);
</script>
<style scoped>
    .content {
        padding: 10px;
        box-shadow: var(--el-box-shadow-light);
        border-radius: var(--el-card-border-radius);
        border: 1px solid var(--el-card-border-color);
        background-color: var(--el-card-bg-color);
        overflow: hidden;
        color: var(--el-text-color-primary);
        transition: var(--el-transition-duration);
    }
</style>
